<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="visible"
    width="1000px"
    @closed="closed"
  >
    <el-form ref="form" class="timeForm" :model="form">
      <el-form-item :label="type===1?'日达配置档次':'大车用户日达配置档次'">
        <el-select v-model="form.grade" placeholder="请选择" @change="gradeChange">
          <el-option
            v-for="(item,index) in gradeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-for="(ele,index) in form.timeGrade" :key="index" class="timeItem">
        <span>用户在当日</span>
        <el-time-picker
          v-model="ele.start"
          :disabled="(index!==0)"
          format="HH:mm"
          placeholder="开始时间"
          :picker-options="{
            selectableRange: ele.startableRange
          }"
          @change="startChange(index)"
        />
        <span class="to"> ~ </span>
        <el-time-picker
          v-model="ele.end"
          format="HH:mm"
          placeholder="结束时间"
          :picker-options="{
            selectableRange: ele.endableRange
          }"
          @change="endChange(index)"
        />
        <span>下单，默认显示当天</span>
        <el-time-picker
          v-model="ele.delivery"
          format="HH:mm"
          :clearable="false"
          placeholder="送达时间"
          :picker-options="{
            selectableRange: ele.deliveryableRange
          }"
        />
        <span>前送达</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import dayjs from 'dayjs'
  export default {
    name: 'appointmentTimeAdd',
    data() {
      return {
        title: '',
        visible: false,
        form: {
          timeGrade: [],
          grade: 2
        },
        gradeList: new Array(4).fill(1).map((v, i) => ({ label: `${++i} 档`, value: i })),
        type: 1,
        isEdit: false
      }
    },
    methods: {
      minTimeHandle(val) {
        if (!val) return ''
        const time = val ? val.split(':')[0] : ''
        const t = time ? Number(time) - 1 : '50'
        return t + ': 00'
      },
      open(temp, type) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.title = type === 1 ? '修改日达配置' : '修改大车用户日达配置'
            this.isEdit = true
            this.form.timeGrade = temp.map((item) => ({
              start: new Date(item.start),
              end: new Date(item.end),
              delivery: new Date(item.delivery),
              startableRange: '00:00:00 - 23:59:00',
              endableRange: dayjs(new Date(item.start)).add(1, 'minute').format('HH:mm') + ':00 - 23:59:00',
              deliveryableRange: dayjs(new Date(item.end)).add(1, 'minute').format('HH:mm') + ':00 - 23:59:00'
            }))
            this.form.grade = temp.length
            console.log(temp, type)
          } else {
            this.title = type === 1 ? '新增日达配置' : '新增大车用户日达配置'
            this.gradeChange()
          }
          this.type = type
        })
      },
      gradeChange() {
        this.form.timeGrade = new Array(Number(this.form.grade)).fill(1).map((v, i) =>
          ({ start: '', end: '', delivery: '', startableRange: '00:00:00 - 23:59:00',
             endableRange: '00:00:00 - 23:59:00', deliveryableRange: '00:00:00 - 23:59:00' }))
      },
      clearBehind(i) {
        this.form.timeGrade.forEach((item, idx) => {
          if (idx > i) {
            console.log(item)
            this.form.timeGrade[idx].start = ''
            this.form.timeGrade[idx].end = ''
            this.form.timeGrade[idx].delivery = ''
          }
        })
      },
      startChange(i) {
        if (!this.form.timeGrade[i].start) {
          if (i > 0) {
            this.form.timeGrade[i].start = this.form.timeGrade[i - 1].end
          } else {
            this.form.timeGrade[i].start = ''
            this.form.timeGrade[i].delivery = ''
          }
          this.clearBehind(i)
        } else {
          const t = dayjs(new Date(this.form.timeGrade[i].start)).add(1, 'minute').format('HH:mm')
          console.log(this.form.timeGrade[i].start, t + ':00 - 23:59:00', new Date(this.form.timeGrade[i].start))
          this.form.timeGrade[i].endableRange = t + ':00 - 23:59:00'
        }
        if (i > 0 && !this.form.timeGrade[i - 1].end) {
          this.$message.warning('请先选择上一时间段结束时间')
          this.form.timeGrade[i].start = ''
        }
        if (this.form.timeGrade[i].end) {
          this.form.timeGrade[i].end = ''
        }
      },
      endChange(i) {
        this.clearBehind(i)
        const t = dayjs(new Date(this.form.timeGrade[i].end)).add(1, 'minute').format('HH:mm')
        console.log(t)
        if (this.form.timeGrade[i].end) {
          if (!this.form.timeGrade[i].start) {
            this.$message.warning('请先选择上一时间段结束时间')
            this.form.timeGrade[i].end = ''
          } else {
            this.form.timeGrade[i].delivery = ''
            this.form.timeGrade[i].deliveryableRange = t + ':00 - 23:59:00'
            if (i < this.form.timeGrade.length - 1) {
              this.form.timeGrade[i + 1].start = this.form.timeGrade[i].end
              this.form.timeGrade[i + 1].startableRange = t + ':00 - 23:59:00'
              this.form.timeGrade[i + 1].endableRange = t + ':00 - 23:59:00'
            }
          }
        } else {
          this.form.timeGrade[i].delivery = ''
          if (i < this.form.timeGrade.length - 1) {
            this.form.timeGrade[i + 1].start = ''
          }
        }
      },
      closed() {
        this.form = {
          timeGrade: [],
          grade: 2
        }
      },
      async confirm() {
        console.log(this.form)
        this.visible = false
        this.visible = false
        const f = this.form.timeGrade.some(item => !item.start || !item.end || !item.delivery)
        if (f) {
          this.$message.warning('时间段不能为空')
          return
        } else {
          if (this.type === 1) this.form.dayType = 1
          if (this.type === 2) this.form.dayType = 2

          this.resolve(this.form)
          this.visible = false
        }

        // const res = await appointTimeSettingDaySave(query)
        // if (res) {
        //   if (this.isEdit) {
        //     this.$message.success('修改成功')
        //   } else {
        //     this.$message.success('新增成功')
        //   }
        //   this.resolve()
        //   this.visible = false
        // }
      },
      cancel() {
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.timeForm {
  /deep/ .el-date-editor {
    width: 150px;
  }
}
</style>
